<template>
	<view class="content">
		<view class="header">
			<!-- 			<view class="status_bar">
			</view> -->
			<image mode="widthFix" class="banner-img" src="/static/image/icon/home1.png" alt="" />

		</view>
		<view class="bodyer bg-gray ">
			<view class="tit padding-top padding-left-xl text-xl">
				<text class="txt">心里评测</text>

			</view>
			<view class="cu-card article">
				<view class="cu-item shadow">
					<view class="title">
						<view class="text-cut text-black">特质理论类测试</view>
					</view>
					<view class="content">
						<image src="/static/image/icon/pc.jpg" mode="heightFix">
						</image>
						<view class="desc">
							<view class="text-content"> 核心思想：将性格分解为多个独立的“特质”（Traits），通过量化评分描述个人倾向。</view>
							<!-- 								<view>
									<view class="cu-tag bg-red light sm round">正义天使</view>
									<view class="cu-tag bg-green light sm round">史诗</view>
								</view> -->
							<button @click="openTestDetail" class="cu-btn margin-top-sm cu-custom round">一键测试</button>
						</view>
					</view>
				</view>
				<view class="cu-item shadow">
					<view class="title">
						<view class="text-cut text-black">类型理论类测试</view>
					</view>
					<view class="content">
						<image src="/static/image/icon/pc.jpg" mode="heightFix">
						</image>
						<view class="desc">
							<view class="text-content"> 核心思想：将性格分为有限的“类型”（Types），强调类型的差异性。</view>
							<!-- 								<view>
														<view class="cu-tag bg-red light sm round">正义天使</view>
														<view class="cu-tag bg-green light sm round">史诗</view>
													</view> -->
							<button class="cu-btn margin-top-sm cu-custom round">一键测试</button>
						</view>
					</view>
				</view>
				<view class="cu-item shadow">
					<view class="title">
						<view class="text-cut text-black">心理动力学类测试</view>
					</view>
					<view class="content">
						<image src="/static/image/icon/pc.jpg" mode="heightFix">
						</image>
						<view class="desc">
							<view class="text-content"> 核心思想：基于弗洛伊德理论，探索潜意识对性格的影响。</view>
							<!-- 								<view>
																			<view class="cu-tag bg-red light sm round">正义天使</view>
																			<view class="cu-tag bg-green light sm round">史诗</view>
																		</view> -->
							<button class="cu-btn margin-top-sm cu-custom round">一键测试</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onReady,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'

	//打开详情
   function openTestDetail(){
	   
	   uni.navigateTo({
	   	url:"/pages/home/test-detail/desc-page"
	   })
	   
   }

	let title = ref("标题")
</script>

<style lang="scss">
	.header {
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}

		.banner-img {
			width: 100%;
		}

	}

	.bodyer {
		.txt {
			position: relative;
			font-weight: 600;

			&:before {
				position: absolute;
				left: -20rpx;
				top: 6rpx;
				content: "";
				height: 40rpx;
				width: 8rpx;
				background: #fb7299;
				border-radius: 8rpx;
			}
		}

		.cu-custom {
			display: flex;
			align-items: center;
			background-color: #fb7299;
			color: #fff;
			width: 50%;
			margin-left: auto;
		}

	}
</style>